<template>
	<view>
		<view class="bg">
		</view>
		<view class="banner">
			<image src="../../static/image/juxing.png" mode=""></image>
		</view>
		<view class="wrapper">
			<view class="tip_bottom">
				<view class="tip" @click="tofirstuse">
					<view class="tip_icon">
						<image src="../../static/image/baoguo1.png" mode=""></image>
					</view>
					<view class="tip_text">
						初次使用包裹转运
					</view>
					<image class="tip_image" src="../../static/image/baoguo2.png" mode=""></image>
				</view>
				<view class="tip" @click="toAddress">
					<view class="tip_icon">
						<image src="../../static/image/dizhi-4@2x.png" mode=""></image>
					</view>
					<view class="tip_text">
						查看仓库地址
					</view>
					<image class="tip_image" src="../../static/image/daohangdizhi.png" mode=""></image>
				</view>
			</view>
			<view class="middle" v-for="(item,index) in packageData" :key="index">
				<u-form :model="item" label-width="200" :border-bottom="false">
					<view class="middle_wrapper input" @click="toLogin">
						<u-form-item label="快递公司" class="label" :border-bottom="false">
							<u-action-sheet :list="companyList" v-model="isShowCompanyList" @click="getIndexCompany"></u-action-sheet>
						</u-form-item>
						<view class="icon" @click="toShowCompanyList(index)">
							<view
							:class="item.express?'sview':'input_active'">
								{{item.express?item.express:"请选择快递名称"}}
							</view>
							<image src="../../static/image/xiangyou1.png" mode="" :class="item.express?'rorate':''"></image>
						</view>
					</view>
					<view class="middle_wrapper">
						<u-form-item label="快递单号" class="label" :border-bottom="false">
							<u-input v-model="item.express_sn" 
							input-align="right"
							placeholder="请输入快递单号"
							@focus="toLogin"
							/>
						</u-form-item>
					</view>
					<view class="middle_wrapper">
						<u-form-item label="物品名称" class="label" :border-bottom="false">
							<u-input v-model="item.name" 
							input-align="right"
							placeholder="请输入物品名称"
							@focus="toLogin"
							/>
						</u-form-item>
					</view>
					<view class="middle_wrapper">
						<u-form-item label="物品价值" class="label" :border-bottom="false">
							<u-input v-model="item.price" 
							input-align="right"
							placeholder="请输入物品价值"
							type="digit"
							@focus="toLogin"
							/>
						</u-form-item>
					</view>
					<view class="middle_wrapper input" @click="toLogin">
						<u-form-item label="商品类型" class="label" :border-bottom="false">
							
							<u-action-sheet :list="GoodstypeList" v-model="isShowGoodsList" @click="getIndexGoods"></u-action-sheet>
						</u-form-item>
						<view class="icon" @click="toShowGoodsList(index)">
							<view
							:class="item.goodstype?'sview':'input_active'">
								{{item.goodstype?item.goodstype:"请选择商品类型"}}
							</view>
							<image src="../../static/image/xiangyou1.png" mode="" :class="item.goodstype?'rorate':''"></image>
						</view>
					</view>
					<view class="middle_wrapper">
						<u-form-item label="商品数量" class="label" :border-bottom="false">
							<view class="num">								<view class="jian" @click="jianNum(index)">									<image src="../../static/image/jianshao@2x.png" mode=""></image>								</view>								<view class="count">									{{item.num}}								</view>								<view class="jia"  @click="jiaNum(index)">									<image src="../../static/image/jiahao2fill.png" mode=""></image>								</view>						</view>
						</u-form-item>
					</view>
					<view class='borderNone middle_wrapper'>
						<u-form-item label="商品备注" class="label" :border-bottom="false">
							<u-input v-model="item.remark" 
							input-align="right"
							placeholder="可以输入商品的颜色尺码等信息"
							@focus="toLogin"
							/>
						</u-form-item>
					</view>
					<view class="middle_wrapper delete" v-if="index!==packageData.length-1"  @click="deletePackage(index)">
						<view class="delete_image">
							<image src="../../static/image/delete.png" mode=""></image>
						</view>
						<view class="delete_text">
							删除
						</view>
					</view>
				</u-form>
			</view>
			<view class="btn_wrapper">
				<view class="btn" @click="addOne">
					<view class="addOne">
						<image src="../../static/image/jiahao2fill.png" mode=""></image>
					</view>
					<view class="addText">
						再添加一个包裹
					</view>
				</view>
			</view>
			<view class="bottom">
				<image :src="image" mode="" @click="changeArgee"></image>
				<view class="text1">
					您已阅读并同意
				</view>
				<view class="text2" @click="toAgreement">
					《用户协议与交易服务协议》
				</view>
			</view>
			<view class="btn_submit" @click="finish">
				<button>提交预报</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				packageData:[{
					express:"",
					express_sn:"",
					name:"",
					price:"",
					goodstype:"",
					num:1,
					remark:""
				}],
				isShowCompanyList:false,
				companyList:[],
				companyIndex:0,
				isShowGoodsList:false,
				GoodstypeList:[],
				GoodsIndex:0,
				image:"../../static/image/gou-5@2x.png",
				isArgee:true,
				id:""
			}
		},
		async onLoad(option) {
			if(option.id){
				this.id=option.id
			}	
		},
		onShow() {
			let infor={
					express:"",
					express_sn:"",
					name:"",
					price:"",
					goodstype:"",
					num:1,
					remark:""
			}
			let packageDetail=uni.getStorageSync("packageDetail")||infor;
			console.log(packageDetail)
			for(let item in this.packageData[0]){
				this.packageData[0][item]=packageDetail[item]
			}
			uni.removeStorageSync("packageDetail")
			console.log(this.packageData)
			this.id=""
		},
		methods: {
			toLogin(){
				let token=uni.getStorageSync("token")
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登录",
						icon:"error"
					})
				}
			},
			//获取公司和商品类型数据
			async getGoodsList(){
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"order/goodstype",
					header:{
						"token":token
					}
				})
				return data.data.map(item=>{return {"text":item}})
			},
			async getCompanyList(){
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"order/express",
					header:{
						"token":token
					}
				})
				return data.data.map(item=>{return {"text":item}})
			},
			getIndexCompany(index){
				this.packageData[this.companyIndex].express=this.companyList[index].text
				console.log(this.packageData[this.companyIndex])
			},
			async toShowGoodsList(index){
				this.GoodstypeList=await this.getGoodsList()
				this.isShowGoodsList=true
				this.GoodsIndex=index;
			},
			getIndexGoods(index){
				this.packageData[this.GoodsIndex].goodstype=this.GoodstypeList[index].text
				console.log(this.packageData[this.GoodsIndex])
			},
			async toShowCompanyList(index){
				this.companyList=await this.getCompanyList()
				this.isShowCompanyList=true
				this.companyIndex=index;
			},
			
			//减商品数量
			jianNum(index){
				let token=uni.getStorageSync("token")
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登录",
						icon:"error"
					})
					return
				}
				this.packageData[index].num==1?1:this.packageData[index].num--;
			},
			//加商品数量
			jiaNum(index){
				let token=uni.getStorageSync("token")
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登录",
						icon:"error"
					})
					return
				}
				this.packageData[index].num++;
			},
			//添加一个包裹
			addOne(){
				let token=uni.getStorageSync("token")
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登录",
						icon:"error"
					})
					return
				}
				this.packageData.push({num:1})
			},
			//判断是否已经勾选同意
			changeArgee(){
				if(!this.isArgee){
					this.image="../../static/image/gou-5@2x.png"
					this.isArgee=true
				}else{
					this.image="../../static/image/tuoyuan.png"
					this.isArgee=false
				}
			},
			//提交包裹接口
			async submitForeCast(){
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"order/submit_package",
					methods:"post",
					header:{
						"token":token
					},
					data:this.packageData
				})
				console.log(data)
				return data
			},
			
			async finish(){
				let token=uni.getStorageSync("token")
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				if(!this.isArgee){
					uni.showToast({
						title:"请先阅读《用户协议与交易服务协议》",
						icon:"none"
					})
					return
				}
				const data=await this.submitForeCast()
				if(data.code!==1){
					uni.showToast({
						title:data.msg,
						icon:"error"
					})
					return
				}
				// this.packageData=[{num:1}]
				// this.packageData[0].num=1
				uni.navigateTo({
					url:"/pages/user/waitTohouse/waitTohouse"
				})
				uni.showToast({
					title:data.msg
				})
			},
			//跳转第一个使用包裹页面
			tofirstuse(){
				uni.navigateTo({
					url:"/pages/forecast/children/firstuse/firstuse"
				})
			},
			//跳转至仓库地址
			toAddress(){
				let token=uni.getStorageSync("token");
				if(!token){
					uni.navigateTo({
						url:"/pages/login/login"
					})
					uni.showToast({
						title:"请先登陆",
						icon:"error"
					})
					return
				}
				uni.navigateTo({
					url:"/pages/forecast/children/address/address"
				})
			},
			async getPackageDetail(id){
				let token=uni.getStorageSync("token")
				const {data}=await this.$http({
					url:"order/order_package_row?id="+id,
					header:{
						"token":token
					}
				})
				return data.data.row
			},
			toAgreement(){
					uni.navigateTo({
						url:"/pages/agreement/agreement"
					})
			},
			deletePackage(index){
				this.packageData.splice(index,1)
			}
		}
	}
</script>

<style scoped>
.bg{
	position: fixed;
	background-color: #f1f1f1;
	width: 100%;
	height: 100%;
	left:0;
	top: 0;
	z-index: -1;
}
.wrapper{
	padding: 0 30rpx;
}
.banner image{
	width:100% ;
	height: 300rpx;
}
.tip_bottom{
	display: flex;
	justify-content: space-between;
	height: 108rpx;
	margin: 20rpx 0;
}
.tip{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	height: 108rpx;
	width: 335rpx;
	border-radius: 10rpx;
}
.tip .tip_text{
	margin-left: 30rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #333333;
}
.tip .tip_icon image{
	width: 51rpx;
	height: 51rpx;
	vertical-align: bottom;
}
.tip .tip_image{
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 85rpx;
}
.middle{
	background-color: #FFFFFF;
	margin-top: 20rpx;
}
.middle_wrapper{
	padding: 0 30rpx;
	border-bottom: 1rpx solid rgba(151,151,151,0.2);
	position: relative;
}
.middle_wrapper .icon{
	display: flex;
	position: absolute;
	align-items: center;
	right: 5%;
	top: 35%;
}
.sview{
	margin-right: 10rpx;
}
.middle .icon image{
	height: 25rpx;
	width: 14rpx;
	
	
}
.input{
	padding-right: 60rpx;
}
.num{
	display: flex;
	position: absolute;
	align-items: center;
	right: 5%;
	top:20%
}


.num image{
	width: 36rpx;
	height: 36rpx;
}
.num .count{
	margin: 0 10rpx;
	margin-bottom: 10rpx;
}
.borderNone{
	border-bottom: none;
}
.btn_wrapper{
	background-color: #FFFFFF;
	width: 100%;
	height:110rpx;
	display: flex;
	justify-content: center;
	padding-top: 20rpx;
}
.btn{
	width: 442rpx;
	height: 82rpx;
	background: #FFFFFF;
	border: 2rpx solid #F7CC46;
	border-radius: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.addOne image{
	width: 36rpx;
	height: 36rpx;
	vertical-align: bottom;
	margin-right: 20rpx;
}
.addText{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #F7CC46;
}
.bottom .circle{
	width: 31rpx;
	height: 31rpx;
	background: #FFFFFF;
	border: 1rpx solid #999999;
	border-radius: 50%;
}
.bottom image{
	width: 31rpx;
	height: 31rpx;
}
.bottom{
	width: 600rpx;
	display: flex;
	align-items: center;
	margin:20rpx 0;
}
.bottom .text1{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	margin: 0 10rpx;
}
.bottom .text2{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #F7CC46;
}
.btn_submit{
	margin-bottom: 20rpx;
}
.btn_submit button{
	width: 690rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
.input_active{
	margin-right: 10rpx;
	font-size: 28rpx;
	color: #c0c4cc;
}
.rorate{
	transform: rotateZ(90deg);
}
.delete{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fafafa;
	padding: 10rpx 0;
	border-top:1rpx solid rgba(151,151,151,0.2) ;
}
.delete_image image{
	width: 40rpx;
	height: 40rpx;
	vertical-align: center;
}
.delete_text{
	margin-left: 10rpx;
	font-size: 26rpx;
}
</style>
